<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<script src="<%=request.getContextPath() %>../resources/js/jquery-3.1.1.js" type="text/javascript"></script>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 600px;
            margin: 0 auto;
        }
        #welcome{
            text-align: center;
        }
        table{
            width: 600px;
            text-align: center;
        }
        table tr{
            height: 50px;
        }
      /*  #pageIndex{
            position: absolute;
            top: 600px;
            left: 1000px;
          }*/
        .show{
            width: 310px;
            margin-top: -20px;
            display: none;
            border: 1px solid black;
        }
    </style>
</head>
<script type="text/javascript">
    function deleteNews() {
        var result=confirm("确认要删除吗?")
        if(result){
            return true;
        }else {
            return false;
        }
    }
</script>
<body>
   <div id="content">
       <br/><br/><br/><br/><p id="welcome">欢迎管理员${admin.adminName}</p>
       <a href="javascript:on" onclick="exitLogin()">退出登录</a>
       <div id="exitLogin" style="display: none;">
           <span id='time'>5</span>秒钟之后自动跳转，如果不跳转，请点击下面链接<a href='login.html'>点我</a>
        </div>
       <br/><br/>
       <a href="addBoard.html">添加板块</a><br/><br/>
       <a href="addNewsBoard">添加新闻</a><br/><br/>
       <form action="toMainPageServlet" method="post">
           <input type="text" name="keyword" id="mainKey" placeholder="请输入关键字"  size="40px" value="${keyword}"/>
           <input type="submit" value="搜索"><br/><br/>
           <div id="show" class="show" ></div>
       </form>
       <table border="1" cellpadding="0" cellspacing="0" >
           <tr>
               <th>新闻编号</th>
               <th>新闻标题</th>
               <th>新闻内容</th>
               <th>操作</th>
           </tr>
           <c:forEach items="${newsList}" var="n">

               <tr>
                   <td>${n.newsId}</td>
                   <td>${n.title}</td>
                   <td>${n.board.topicName}</td>
                   <td>
                       <a href="editNewsServlet?newsId=${n.newsId}">修改</a>/
                       <a href="deleteNewsServlet?newsId=${n.newsId}" onclick="return deleteNews()">删除</a>
                   </td>
               </tr>

           </c:forEach>
           <tr id="pageIndex">
               <td colspan="4">
                   <a href="toMainPageServlet?pageIndex=1&keyword=${keyword}">首页</a>
                   <a href="toMainPageServlet?pageIndex=${pageIndex-1}&keyword=${keyword}">上一页</a>
                   <a href="toMainPageServlet?pageIndex=${pageIndex+1}&keyword=${keyword}">下一页</a>
                   <a href="toMainPageServlet?pageIndex=${totalPages}&keyword=${keyword}">尾页</a>
               </td>
           </tr>
       </table>
   </div>

<script>
    function exitLogin() {
        delayURL("login.html");
    }

    function delayURL(url) {
        var delay=document.getElementById("time").innerHTML;
        document.getElementById("exitLogin").style.display= 'block';
        if(delay>0){
            delay--;
            // alert(delay);
            //console.log(delay);
            document.getElementById("time").innerHTML=delay;
        }else{
            window.top.location.href=url;
        }
       setTimeout(exitLogin,1000);
       // setTimeout(delayURL("login.html"),1000);
    }
    var showNode=document.getElementById("show");
    $(function () {
      $("#mainKey").keyup(function () {

          var thekey=$("#mainKey").val();
          //console.log(thekey);
          $.ajax({
              url:"getKeywordNameServlet",
              type:"POST",
              data:{
                  "theKey":thekey
              },
              success:function (data) {
                  //console.log(data);
                  var result=data.split(",");
                  showNode.style.display="block";
                  showNode.innerHTML="";
                  for (var i=0;i<result.length;i++){
                      var divNode=document.createElement("div");
                      divNode.innerHTML="<p onmouseover='overMethod(this)' onmouseout='outMethod(this)' " +
                          "onclick='resultMethod(this)'>"+result[i]+"</p>"
                      showNode.appendChild(divNode);
                  }
              }
          });
      });
    });
                function overMethod(obj){
                    obj.style.backgroundColor="darkgrey";
                }
                function outMethod(obj){
                    obj.style.backgroundColor="white";
                }
                function resultMethod(obj){
                    var v=obj.innerHTML;
                    $("#mainKey").val(v);
                    showNode.style.display="none";
                }
</script>
</body>
</html>
